<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="renderer" content="webkit" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>千峰教育大前端Vue教学</title>
  <!-- 引入vue -->
  <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>

<body style="margin:100px;font-size:22px;">
  <!-- 定义一个容器 -->
  <div id="app">
    <!-- 声明模板内容 -->
    <div id="info">{{info}}</div>
  </div>
  <script>
    // 创建应用
    const app = Vue.createApp({
      // 初始化数据函数
      data() { // 返回一个对象，对象中写初始化数据
        console.log('================= data');
        return {
          info: 'hello world', // 初始化一个的数据 可以用 this.info 访问到
        };
      },
      beforeCreate() { //创建之前
        console.log('================= beforeCreate');
        console.log('================= created info =', this.info);
        // this.info = '我喜欢到千锋学习'; // 这里设置是没有用的,因为数据还没有初始化
      },
      created() { //已创建 (常用)
        console.log('================= created');
        console.log('================= created info =', this.info);
        setTimeout(() => this.info = '我喜欢到千锋学习', 2000); // 2秒后更新
        setTimeout(() => app.unmount(), 5000);  // 5秒后卸载
        this.timerId = setInterval(() => console.log(new Date()), 1000);  // 每秒打印
      },
      beforeMount() { //挂载之前
        console.log('================= beforeMount');
        console.log('================= beforeMount dom', document.getElementById('info')); // 获取不到dom
      },
      mounted() { //已挂载 (常用)
        console.log('================= mounted');
        console.log('================= mounted dom', document.getElementById('info')); // 可以获取到dom
      },
      beforeUpdate() { //更新之前
        console.log('================= beforeUpdate');
      },
      updated() { //已更新
        console.log('================= updated');
      },
      beforeUnmount() { //卸载之前 (常用)
        console.log('================= beforeUnmount');
        clearInterval(this.timerId);
      },
      unmounted() { //已卸载
        console.log('================= unmounted');
        console.log('================= unmounted dom', document.getElementById('info')); // dom已经销毁,获取不到dom
      },
    });
    // 挂载应用
    app.mount('#app');
  </script>
</body>

</html>